<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Title</title>
</head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<script charset="utf-8" src="jquery-1.10.2.min.js"></script>
<script charset="utf-8" src="bootstrap/js/bootstrap.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 col-sm-8">
            <input type="text" class="form-control" name="address" id="address"/>
        </div>
        <div class="col-lg-2 col-sm-2">
            <label id="local"></label>
        </div>
        <div class="col-lg-2 col-sm-2">
            <button id="search" class="btn btn-default pull-right" onclick="search();">检索</button>
        </div>
    </div>

    <div id="container" style="width:99%; height:400px"></div>
    <ul id="path" class="list-group">

    </ul>
</div>
</body>
<script>

    var geocoder = null;
    var geocoderAddress = null;

    function initList(result) {
        var firstItem = result.detail.nearPois[0];
        $("#address").val(firstItem.address+firstItem.name);

        var local = $("#local");
        local.text(firstItem.latLng.lat+","+firstItem.latLng.lng);

        var ul = $("#path");
        ul.empty();
        for (var i = 0; i < result.detail.nearPois.length; i++) {
            var item = result.detail.nearPois[i];
            var lat = item.latLng.lat;
            var lng = item.latLng.lng;
            var a = '<a href="##" data-location="'+lat+','+lng+'" data-address="'+item.address+item.name+'"  class="list-group-item">'+
                    '        <h4 class="list-group-item-heading">'+item.name+'</h4>'+
                    '        <p class="list-group-item-text">'+item.address+'</p>'+
                    '</a>';

            ul.append(a);
        }
    }

    var map = null;

    var marker = null;

    var initMarker = function (position) {
        marker = new qq.maps.Marker({
            position: position,
            map: map
        });
        marker.setDraggable(true);
        qq.maps.event.addListener(marker, 'dragend', function (event) {
            geocoder.getAddress(event.latLng);
        });
    }

    function init() {
        var center = new qq.maps.LatLng(39.914850, 116.403765);
        map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: center,
            zoom: 16
        });

        //获取城市列表接口设置中心点
        citylocation = new qq.maps.CityService({
            complete: function (result) {
                map.setCenter(result.detail.latLng);
                initMarker(result.detail.latLng);
                geocoder.getAddress(result.detail.latLng);
            }
        });
        //调用searchLocalCity();方法    根据用户IP查询城市信息。
        citylocation.searchLocalCity();

        var scaleControl = new qq.maps.ScaleControl({
            align: qq.maps.ALIGN.BOTTOM_RIGHT,
            margin: qq.maps.Size(85, 15),
            map: map
        });



        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                initList(result);
            }
        });

        geocoderAddress = new qq.maps.Geocoder({
            complete: function (result) {
                map.panTo(result.detail.location);
                marker.setMap(null);
                initMarker(result.detail.location);
                geocoder.getAddress(result.detail.location);
            }
        });

    }
    init();

    function search() {
        var address = $("#address").val();
        geocoderAddress.getLocation(address);
    }

    $(document).on("click",".list-group-item",function () {
        var locals = $(this).attr("data-location");
        var center = new qq.maps.LatLng(locals.split(",")[0],locals.split(",")[1]);
        map.panTo(center);
        marker.setMap(null);
        initMarker(center);


        var address = $(this).attr("data-address");
        $("#address").val(address);

        var local = $("#local");
        local.text(locals);

    });

</script>
</html>
